[iOS 9] UIStackViewでAndroidのView.GONEを実装する

加藤潤

2015.10.26

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

はじめに

こんにちは！加藤潤です。

これまでこちらにあるように条件によって特定のビューの表示/非表示を切り替える場合、非表示にした場合にその分のスペースを詰めたり、逆に表示した場合にスペースを空ける等の処理はConstraintを2つ用意して差し替えたり、少々トリッキーなやり方でやっていました。 Android Developerの方は「View.GONEがあれば。。。」と思ったに違いありません。

しかしiOS 9で追加されたUIStackViewを使えばViewのhiddenを切り替えるだけでView.GONEの動きが出来ちゃいます。今回はその方法をご紹介します。

開発環境

開発環境は以下の通りです。

Xcode 7.0.1
iPhone 6sシミュレータ

ビューの配置 & 制約の追加

今回はUISwitchと2つのUITextViewを配置し、UISwitchのON/OFFで先頭のUITextViewの表示/非表示を切り替えます。

まずはStoryboard上で下記のようにUISwitchと2つのUITextViewを貼り付けます。わかりやすいようにUITextViewには背景色、テキストを設定します。

この時点でUISwitchに以下の制約を追加します。

Leading Space to: Superview
TopSpace to: Top Layout Guide Equals: 20

続いて2つのUITextViewをUIStackViewで包みましょう。下記のように2つのUITextViewを選択した状態で「Stack」をクリックします。

すると下記のように選択したUITextViewがUIStackViewで包まれます。

この状態だとAutolayoutの制約が不足しているのでエラーとなります。下記の制約を追加してください。

1番目のUITextViewにHeight Equals: 100を設定
2番目のUITextViewにHeight Equals: 200を設定
UIStackViewにTrailing Space to Superviewを設定
UIStackViewにLeading Space to Superviewを設定
UIStackViewにTop Space to: Switch Equals 20を設定

最終的に制約は下記のようになります。

コーディング

ここまででビューを配置して制約の設定が終わったので後はコーディングするだけです。とは言っても簡単で、下記のように1番目のUITextViewのアウトレットとUISwitchの値変更アクションメソッドを実装します。アクションメソッドの中で1番目のUITextViewのhiddenを切り替えるだけです。

class ViewController: UIViewController {
    
    // 1番目のテキストビュー
    @IBOutlet weak var firstTextView: UITextView!
    
    // UISwitchの変更イベント
    @IBAction func didChangeValue(sender: UISwitch) {
        UIView.animateWithDuration(0.3) { () -> Void in
            self.firstTextView.hidden = !sender.on
        }
    }
}